<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html>
<head>
    <title>情侣列表 - HiLover</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <jsp:include page="../common/header.jsp"/>
    
    <main class="main">
        <div class="filter-section">
            <div class="year-filter">
                <span style="font-weight: bold;font-size: 20px">情侣列表</span>
                <select id="yearSelect" onchange="filterByYear(this.value)">
                    <option value="">全部</option>
                    <c:forEach items="${years}" var="year">
                        <option value="${year}" ${selectedYear == year ? 'selected' : ''}>
                            ${year}年
                        </option>
                    </c:forEach>
                </select>
            </div>
        </div>
        
        <section class="couple-list">
            <div class="couple-grid">
                <c:forEach items="${couples}" var="couple">
                    <div class="couple-card">
                        <a href="/couples/${couple.id}">
                            <div class="couple-avatars">
                                <img src="${couple.lover1Avatar}" alt="${couple.lover1Name}">
                                <img src="${couple.lover2Avatar}" alt="${couple.lover2Name}">
                            </div>
                            <div class="couple-info">
                                <h3>${couple.lover1Name} & ${couple.lover2Name}</h3>
                                <p>在一起 ${couple.daysTogether} 天</p>
                                <p>❤️ ${couple.likes}</p>
                            </div>
                        </a>
                    </div>
                </c:forEach>
            </div>
        </section>
    </main>
    
    <jsp:include page="../common/footer.jsp"/>
    
    <script>
    function filterByYear(year) {
        if (year) {
            window.location.href = '/couples?year=' + year;
        } else {
            window.location.href = '/couples';
        }
    }
    </script>
</body>
</html> 